<style>

    li {
        list-style: none;
        display: inline-block;
    }
    .bj {
        padding: 0 20px;
        cursor: pointer;
    }
    .bb {
        color:  #18a;
    }
    .add-dom:first-child {
        margin: 0
    }
    .add-dom{
        width: 100px;
        height: 20px;
        box-sizing: border-box;
        display: inline-block;
        line-height: 20px;
        cursor: pointer;
        font-size: 12px;
        margin: 0 10px;
        background: #ccc;

    }
    #check-class {
        width: 400px;
        height: 20px;
        display:inline-block ;
        border: 1px solid #ccc;
    }
</style>
<div style="height: 700px;">
    <label for="check-class">
        班级选择:
        <dev  id="check-class"></dev>
    </label>
    <ul id="class">
        <h5>一年级</h5>
        <li class="bj" id="1">一年级(1)班</li>
        <li class="bj" id="2">一年级(2)班</li>
        <li class="bj" id="3">一年级(3)班</li>
        <li class="bj" id="4">一年级(4)班</li>
        <li  class="bj" id="5">一年级(5)班</li>
        <li  class="bj" id="6">一年级(6)班</li>
    </ul>
</div>
<script type='text/javascript' src="/js/lib/jquery-2.2.1.js"></script>
<script>
$(function(){
    let $classesId = [];
    let $li_array = [];
    let $return_dom = [];
    let  $li_doms =  $('ul > li');
    $.each($li_doms,function ($k,$v) {
        let $dom = getDom($v.id,$v.innerHTML)
        $li_array.push($dom);
    });


    $('.bj').click(function (e) {
        let _this = $(this);
        let $html = _this.html();
        let $id = _this.attr('id');
        let $dom = getDom($id,$html);
        if(_this.attr("class").indexOf("bb")>0){
            _this.removeClass('bb');
            let index = $classesId.indexOf($dom);
            if (index > -1) {
                $classesId.splice(index, 1);
            }
        }else{
            _this.addClass('bb');
            if($classesId.indexOf($dom) == -1){
                $classesId.push( $dom);
            }
        }
        drawDom();
    });
    $('#check-class').on("click",".add-dom",function (e) {
        let   $div = $(this).context.outerHTML;
        let index = $classesId.indexOf($div);
        if (index > -1) {
            $classesId.splice(index, 1);
        }
        drawDom();
    });

    function drawDom() {
        $('#check-class').children().filter(".add-dom").remove();
        $("ul > li ").removeClass("bb");
        $.each($classesId,function($k,$v){
            $('#check-class').append($v);
            let $index = $li_array.indexOf($v);
            if( $index > -1){
                $("ul > li ").eq($index).addClass('bb');
            }
        });
    };
    window.getChoseId = function() {
        $return_dom = [];
        $.each($classesId,function($k,$v){
            $('#check-class').append($v);
            let $index = $li_array.indexOf($v);
            if( $index > -1){
             let $html = $("ul > li ").eq($index).html();
             let $id = $("ul > li ").eq($index).attr('id');
             $dom = new Dom($id,$html);
             $return_dom.push($dom);
            }
        });
        return $return_dom;
    };
    function getDom($id,$html) {
        return `<i class="add-dom" id="${$id}">${$html}<span class="add-dom-close-btn">x</span></i>`;
    };

    class Dom {
        constructor($id,$html){
            this.id = $id;
            this.html = $html;
        }
    }


})
</script>

